<!--
 作者 : 唐梓元
 日期 : 2019-6-26
 版本 : 1.0
 描述 :筛选查询所有成果，在首页和查询页面有使用
 使用 : <selectCGList></selectCGList>
 参数 :把子组件的选中情况传值给父组件
 -->
<!--:class="[(cgNameIndex==index&&cgNameIndex2==index2)?'cgNameActive':'', index==0&&cgNameIndex2!=index2?'cgNameActive':'']"-->
<template>
    <div>
      <div class="selectWrapper" ref="cgListWrap">
        <div class=" cgList flex" v-for="(item,index2) in cgList2" :key="index2" >
          <span class="text-center " v-text="item.title"> 成果分类</span>
          <ul class="flex1 flex flexWrap relt" >
            <li class="" v-for="(item2,index) in item.name" :key="index"> <button v-text="item2.text" :class="item2.select?'cgNameActive':''"  @click="do_selectCGList(index,index2,item2)"></button></li>
            <li v-show="item.newline" @click="do_showAllUl(index2)">
              <span class="showOption">
                <img src="../../assets/commonImg/show201992.png" alt="" v-if="showOption[index2]">
                <img src="../../assets/commonImg/hidden201992.png" alt="" v-if="!showOption[index2]">
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "cm_selectCGList",
      data() {
        return {
          showOption: [true, true, true, true, true, true, true],
          cgList2: [
            {newline: false, title: '成果分类', name: [{text: '全部', select: true}]},
            {newline: false, title: '成果范围', name: [{text: '全部', select: true}]},
            {newline: false, title: '获奖类别', name: [{text: '全部', select: true}]},
            {newline: false, title: '获奖等级', name: [{text: '全部', select: true}]},
            {newline: false, title: '届数', name: [{text: '全部', select: true}]},
            {newline: false, title: '学科', name: [{text: '全部', select: true}]},
            {newline: false, title: '学段', name: [{text: '全部', select: true}]},
          ],
          // cgTitleIndex:'',
          cgNameIndex: '0',//cgList[cgNameIndex2].name[0]
          cgNameIndex2: '0',//cgList[0]
          cgNameItem: '',
          firstShowAllUl: [true,true,true,true,true,true,true]
        }
      },
      created() {
        this.def_getData()//获取选择查询条件

      },
      methods: {
        do_selectCGList(index, index2, item) {//index为当前横排第几个，index2为纵向第几排
          if (index != 0) {
            let panduan = false
            item.select = !item.select
            this.cgList2[index2].name.forEach((allItem) => {
              if (allItem.select) {
                panduan = true
              }
            });
            if (panduan) {
              this.cgList2[index2].name[0].select = false
            } else {
              this.cgList2[index2].name[0].select = true
            }
          } else {
            this.cgList2[index2].name.forEach((allItem) => {
              allItem.select = false
            })
            item.select = true
          }

          this.$emit("do_childQuery",'')
        },
        do_showAllUl(index) {
          this.$nextTick(()=>{
            this.$set(this.showOption, index, !this.showOption[index])
            let ulShow = this.$refs.cgListWrap.querySelectorAll(".cgList")
            // console.log(ulShow[index].offsetHeight)
            this.firstShowAllUl[index] = !this.firstShowAllUl[index];
            if (this.firstShowAllUl[index]) {
              ulShow[index].style.height = "40px"
            } else {
              ulShow[index].style.height = "auto"
            }
            this.$store.commit('setQueryStr',this.cgList2)
          })

        },
        def_getData() {

          let me = this;
          me.$ZcPublic.zcServer.Post({
            IsNeedLogin: 'false',
            Paras: {
              Name: 'Vue_resultLib',
              action: "getResultShowQueryCondition",
              Data: {
                organCode:  me.$ZcPublic.OrganCode
              }
            },
            Callback: me.cb_def_getData,
            Scope: me,
          });
        },
        cb_def_getData(resJson, scoped) {
          console.log('选择查询', resJson);
          if (resJson.success) {
            let _data = resJson.data;
            for( let key in _data){
              const indexObj={
                "GradeLevel":3,
                "LearnStage":6,
                "LevelType":2,
                "ResultModel":0,
                "Subject":5,
                "TopticType":1,
                "YearCode":4
              }
              _data[key].forEach((item)=>{
                let _obj = new this.obj(item);
                this.cgList2[indexObj[key]].name.push(_obj)
              })
            }
            console.log('整理后查询条件',this.cgList2)
          }
          this.$store.commit('setQueryStr',this.cgList2)
          this.$nextTick(() => {
            this.getHeight()  //判断选择条件有没换行
          })
        },
        obj(item) {
          this.text = item;
          this.select = false
        },
        getHeight() {//判断选择条件有没换行
          let ulShow = this.$refs.cgListWrap.querySelectorAll(".cgList")
          ulShow.forEach((item, index) => {
            // console.log(item.clientHeight)
            if (item.clientHeight > 50) {//行高大于50代表换行了
              this.cgList2[index].newline = true
              ulShow[index].style.height = "40px"
            }
          })
        }

      }
    }
</script>

<style scoped>
  .selectWrapper{
    background-color: #fff;
  }
  .selectWrapper>div>span{
    flex:0 0 120px;
  }
  .selectWrapper>div{
    height: auto;
    line-height: 40px;
    border-bottom: 1px solid gainsboro;
    font-size: 14px;
    color: grey;
  }
  .selectWrapper>div:last-child{
    border: none;
  }
  .cgList{
    height: auto;
  }
  .cgList ul{
    overflow: hidden;
    line-height: 40px;
    margin: 0;
    height: auto;
  }
  .cgList ul li button{
   margin:0 20px;
  }
  .cgList ul li:first-child{
    width: 130px;
    height: 40px;
    text-align: center;
    font-size: 14px;
  }
  .cgList ul li:last-child{
    position: absolute;
    right: 0;
    top:0px;
   width: 50px;
    cursor: pointer;
  }
  .cgList ul li button{
    cursor: pointer;
    display: inline-block;
    padding: 1px 5px 2px;
    background-color: transparent;
    color: grey;
    height: 28px;
    line-height: 28px;
    min-width: 90px ;
    position: relative;
    top: 2px;
    border: none;
    outline: none;
  }
  .cgList ul li .cgNameActive{
    background-color: #417fff;
    color: white;

  }
  .showOption>img{
    width: 16px;
    height: 16px;
    margin:0 15px;
    -webkit-filter:grayscale(80%) !important;
    -moz-filter:grayscale(80%) !important;
    -o-filter:grayscale(80%) !important;
  }
</style>
